<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/task.css">
</head>

<body>
    <div class="container w">
        <div class="task">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">任务名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">任务时间:</label>
                    <div class="layui-input-block">
                        <input type="text" name="starttime" id="starttime" required lay-verify="required"
                            autocomplete="off" class="layui-input"> --
                        <input type="text" name="endtime" id="endtime" required lay-verify="required" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">相关人员:</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value="">请选择</option>
                            <option value="0">外联部</option>
                            <option value="1">活动部</option>
                            <option value="2">办公室</option>
                            <option value="3">科研部</option>
                            <option value="4">图文中心</option>
                            <option value="5">项管部</option>
                            <option value="6">宣传部</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">相关文件:</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">发布任务</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <script src="./layui/layui.js"></script>
    <script>
        //Demo
        layui.use(['form', 'laydate', 'upload'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var upload = layui.upload;

            upload.render({
                elem: '#upload'
                , accept: 'file'
                , url: '/api/upload/'
                , multiple: true
                , allDone: function (obj) { //当文件全部被提交后，才触发
                    console.log(obj.total); //得到总文件数
                    console.log(obj.successful); //请求成功的文件数
                    console.log(obj.aborted); //请求失败的文件数
                }
                , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

                }
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#starttime' //指定元素
            });
            laydate.render({
                elem: '#endtime' //指定元素
            });
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>

</html>